<template>
  <div class="edit-info">
    <el-dialog :visible="visible" width="700px" :show-close="false">
      <el-form
        :model="ruleForm"
        label-position="top"
        :rules="rules"
        ref="ruleForm"
      >
        <el-row type="flex" justify="start">
          <el-form-item label="证件照" prop="studentPictureUrl">
            <div
              class="up-img"
            >
              <!-- <p>证件照</p> -->
              <div
                class="demo-image__preview"
                v-if="ruleForm.studentPictureUrl"
              >
                <el-image
                  style="max-width: 160px; max-height: 160px"
                  fit="scale-down"
                  :src="ruleForm.studentPictureUrl"
                  :preview-src-list="[ruleForm.studentPictureUrl]"
                >
                </el-image>
                <div class="close" @click="delImg(0)">
                  <i class="el-icon-close"></i>
                </div>
              </div>
              <imageUpload v-else v-model="ruleForm.studentPictureUrl" />
            </div>
          </el-form-item>
        </el-row>
        <el-row :gutter="75">
          <el-col :span="12">
            <el-form-item label="姓名" prop="nickname">
              <el-input
                v-model.trim="ruleForm.nickname"
                placeholder="请输入姓名"
                maxlength="20"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <el-select
                placeholder="请选择"
                v-model="ruleForm.sex"
                style="width: 100%"
              >
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="75">
          <el-col :span="12">
            <el-form-item label="出生日期" prop="birthday">
              <el-date-picker
                style="width: 100%"
                v-model="ruleForm.birthday"
                :picker-options="pickTime"
                type="date"
                size="large"
                placeholder="选择出生日期"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="民族" prop="clan">
              <el-select
                placeholder="请选择"
                v-model="ruleForm.clan"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in nationData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="75">
          <el-col :span="12">
            <el-form-item label="政治面貌">
              <el-select
                placeholder="请选择"
                v-model="ruleForm.political"
                style="width: 100%"
              >
                <el-option
                  v-for="item in politicalList"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="现居住城市" prop="liveCity">
              <el-cascader
                v-model="ruleForm.liveCity"
                :options="provinceAndCityData"
                :show-all-levels="false"
                @change="handleChange"
              >
              </el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="75">
          <el-col :span="12">
            <!-- graduateTime个人信息页面，毕业时间字段暂时废弃，仍保留 -->
            <!-- <el-form-item label="在校时间">
              <el-date-picker
                style="width: 100%"
                v-model="ruleForm.graduateTime"
                type="date"
                placeholder="选择在校时间"
              >
              </el-date-picker>
            </el-form-item> -->
            <el-form-item label="当前身份" prop="identify">
              <el-select
                placeholder="请选择"
                v-model="ruleForm.identify"
                style="width: 100%"
              >
                <el-option label="在校" value="0"></el-option>
                <el-option label="应届" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="籍贯" prop="nativePlace">
              <el-cascader
                v-model="ruleForm.nativePlace"
                :options="provinceAndCityData"
                @change="handleChange2"
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="75">
          <el-col :span="12">
            <el-form-item label="手机号码">
              <el-input
                v-model="ruleForm.mobile"
                :disabled="true"
                placeholder="请输入手机号码"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱地址" prop="email">
              <el-input
                v-model="ruleForm.email"
                placeholder="请输入邮箱地址"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { checkEmail } from "../../../utils/utils";
import { upUserInfo } from "../../../request/api";
import {
  getNationData,
  provinceAndCityData,
  getProvinceAndCityDataLabel,
  getProvinceAndCityDataValue,
  studentType,
} from "../../../utils/frontDataDict";
import { mapActions, mapState } from "vuex";
import { deepClone } from "../../../utils";
import ImageUpload from '@/components/ImageUpload'
export default {
  props: {
    // userInfo: Object,
  },
  components: {ImageUpload},
  data() {
    var validateEmail = (rule, value, callback) => {
      if (!checkEmail(value)) {
        callback(new Error("请正确输入邮箱"));
      } else {
        callback();
      }
    };
    return {
      studentType: studentType,
      action:
        process.env.VUE_APP_BASE_API + "/app-api/student/web-student/upload",
      politicalList: [
        "团员",
        "中共党员(含预备党员)",
        "民主党派",
        "无党派人士",
        "群众",
      ],
      userInfo: {},
      provinceAndCityData,
      nationData: [],
      ruleForm: {
        nickname: "",
        sex: "",
        birthday: "",
        clan: "",
        political: "",
        liveCity: "",
        identify: "0", // 身份
        graduateTime: "", // 个人信息页面，毕业时间字段暂时废弃，仍保留
        mobile: "",
        email: "",
        nativePlace: "",
        studentPictureUrl: "",
      },
      pickTime: {
        disabledDate: (time) => {
          return time.getTime() > Date.now() - 8.64e6;
        },
      },
      visible: false,
      rules: {
        studentPictureUrl: [
          { required: true, message: "请上传证件照", trigger: "change" },
        ],
        nickname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        clan: [{ required: true, message: "请选择民族", trigger: "change" }],
        liveCity: [
          { required: true, message: "请选择居住城市", trigger: "change" },
        ],
        birthday: [
          { required: true, message: "清选择出生日期", trigger: "change" },
        ],
        nativePlace: [
          { required: true, message: "请选择籍贯", trigger: "change" },
        ],
        email: [{ validator: validateEmail, trigger: "blur" }],
      },
    };
  },
  computed: {
    ...mapState(["USER_INFO"]),
  },
  watch: {
    USER_INFO: function (newValue, oldValue) {
      let userInfo = deepClone(newValue);
      try {
        userInfo.liveCity &&
          (userInfo.liveCity = getProvinceAndCityDataValue(userInfo.liveCity));
        userInfo.nativePlace &&
          (userInfo.nativePlace = getProvinceAndCityDataValue(
            userInfo.nativePlace
          ));
      } catch {
        () => {};
      }
      this.ruleForm = userInfo;
    },
  },
  methods: {
    ...mapActions(["FETCH_USER_INFO"]),
    async init() {
      await this.$store.dispatch("FETCH_USER_INFO");
    },
    delImg() {
      this.ruleForm.studentPictureUrl = "";
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let parmas = JSON.parse(JSON.stringify(this.ruleForm));
          parmas.liveCity = getProvinceAndCityDataLabel(parmas.liveCity);
          parmas.nativePlace = getProvinceAndCityDataLabel(
            parmas.nativePlace,
            2
          );
          parmas.studentName = parmas.nickname;
          upUserInfo(parmas).then((res) => {
            if (res.data) {
              this.$message({
                message: "提交成功",
                type: "success",
              });
              this.close();
              this.$parent.$parent.init();
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          return false;
        }
      });
    },
    open() {
      let userInfo = deepClone(this.USER_INFO);
      try {
        userInfo.liveCity &&
          (userInfo.liveCity = getProvinceAndCityDataValue(userInfo.liveCity));
        userInfo.nativePlace &&
          (userInfo.nativePlace = getProvinceAndCityDataValue(
            userInfo.nativePlace
          ));
        userInfo.birthday = "" + userInfo.birthday;
      } catch {
        () => {};
      }
      this.ruleForm = userInfo;
      this.visible = true;
      setTimeout(() => {
        this.$refs.ruleForm.clearValidate();
      });
    },
    close() {
      this.visible = false;
    },
    handleChange(e) {
      console.log(getProvinceAndCityDataLabel(e), e);
    },
    handleChange2(e) {
      console.log(e, this.ruleForm.nativePlace);
    },
  },
  watch: {},
  created() {},
  mounted() {
    let data = this.$store.state.USER_INFO;
    try {
      data.liveCity &&
        (data.liveCity = getProvinceAndCityDataValue(data.liveCity));
      data.nativePlace &&
        (data.nativePlace = getProvinceAndCityDataValue(data.nativePlace));
    } catch {
      () => {};
    }
    this.ruleForm = data;
    // this.init()
    this.nationData = getNationData();
  },
};
</script>

<style lang="less" scoped>
.edit-info {
  /deep/ .el-dialog__body {
    padding: 0 40px 20px 40px;
  }
  /deep/ .el-form--label-top .el-form-item__label {
    padding: 0;
    font-size: 18px;
    color: #37383d;
    line-height: 28px;
    margin-bottom: 10px;
  }
  /deep/ .el-dialog__footer {
    text-align: center;
    padding-bottom: 30px;
  }
  /deep/ .el-button--primary {
    width: 255px;
    height: 68px;
    background: #4677b9;
    border-radius: 4px;
    font-size: 24px;
    font-weight: 600;
    color: #ffffff !important;
    line-height: 33px;
  }
  /deep/ .el-input--suffix .el-input__inner,
  /deep/ .el-input__inner {
    font-size: 18px;
  }
  /deep/ .el-button {
    width: 180px;
    height: 45px;
    border-radius: 4px;
    border: 1px solid #4677b9;
    font-size: 18px;
    font-weight: 600;
    color: #4677b9;
    padding: 0;
    line-height: 45px;
    margin-right: 10px;
  }
  // /deep/ .el-dialog__header {
  //   padding-top: 45px;
  // }
  /deep/ .avatar-uploader .el-upload {
    margin-bottom: 28px;
  }
  .up-img {
    display: flex;
    align-items: flex-start;
    position: relative;
    p {
      font-size: 23px;
      margin-right: 56px;
      font-weight: 400;
      color: #37383d;
      line-height: 32px;
    }
  }
  .close {
    position: absolute;
    right: -13px;
    top: -13px;
    z-index: 3;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50px;
    width: 25px;
    cursor: pointer;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
  }
}
</style>
